<!DOCTYPE html>
<html>

<head>
    <link type="text/css" href="sass/style.css" rel="stylesheet"/>
</head>

<body>
    <nav>
        <div id="logo"><span class="icon-logo"></span>新世界</div>
        <li><a href=#>首页</a></li>
        <li><a href=#>最新活动</a></li>
        <li><a href=#>项目介绍</a></li>
        <li><a href=#>爱心社区</a></li>
        <li><a href=#>关于我们</a></li>
        <li><a href=#><span class="icon-man"></span>登录</a></li>
    </nav>
    <main>
        <section class="newlife">
            <div>
                <p class="main-title">Time of new life</p>
                <p class="sub-title">新时代，年轻的人们让我们一起体验新生活，<b>享</b>受新生活</p>
                <button>开始体验</button>
            </div>
        </section>

        <section class="four-choose">
            <section class="out-contain">
                <div class="inner-contain">
                    <div id="three-circle">
                        <div></div>
                    </div>
                    <p>打造全新世界观，让你更爱你的生活</p>
                </div>
            </section>

            <section class="out-contain">
                <div class="inner-contain">
                    <div id="flag">
                    </div>
                    <p>丰富多彩的统一活动，发挥新世界的主人公意识</p>
                </div>
            </section>

            <section class="out-contain">
                <div class="inner-contain">
                    <div id="flower">
                        <div></div>
                    </div>
                    <p>时尚的新理念，超前体验未知的生活</p>
                </div>
            </section>

            <section class="out-contain">
                <div class="inner-contain">
                    <div id="square">
                        <div></div>
                    </div>
                    <p>完善的培训机制，培养你全新的世界观</p>
                </div>
            </section>
        </section>

        <section class="new-world">
            <div></div>
            <p>关于新世界，你不知道的还有什么?</p>
        </section>

        <section class="find-information">
            <p>
                查找新世界城市活动信息
            </p>
            <hr>
            <p>每个城市有不同的活动信息，请自行查询所需要了解的城市</p>
            <div class="search-city">
                <div class="select-wrap">
                    <select>
                        <option>中国</option>
                        <option>日本</option>
                        <option>韩国</option>
                        <option>美国</option>
                    </select>
                </div>

                <div class="select-wrap">
                    <select>
                        <option>北京市</option>
                        <option>广东省</option>
                        <option>河北市</option>
                        <option>辽宁市</option>
                    </select>

                </div>

                <div class="select-wrap">
                    <select>
                        <option>广州</option>
                        <option>哈尔滨</option>
                        <option>深圳</option>
                        <option>韶关</option>
                    </select>
                </div>
                <button>搜索</button>
            </div>
        </section>

        <section class="photo-frame">
            <div>
                <div class="img-contain">
                    <div class="img-wrap first-img">
                    </div>
                    <p>北京活动</p>
                    <p>新社区大联盟</p>
                </div>
                <div class="img-contain">
                    <p>上海活动</p>
                    <p>夜景上海景观探索</p>
                    <div class="img-wrap second-img">
                    </div>
                </div>
                <div class="img-contain">
                    <div class="img-wrap third-img">
                    </div>
                    <p>深圳活动</p>
                    <p>全新海岸线景观站</p>
                </div>
                <div class="img-contain">
                    <div class="img-wrap fourth-img">
                    </div>
                    <p>香港活动</p>
                    <p>奢侈消费大派送</p>
                </div>
            </div>

        </section>
        <section class="time">
            <div class="newworld-time">
                <div>
                    <p>新世界</p>
                    <p>TIME</p>
                    <p>@新世界 - 北京</p>
                    <p>2016.04.01</p>
                </div>
            </div>
            <article class="newworld">
                <div>
                    <h2>新世界／<span>01</span></h2>
                    <p>新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界</p>
                    <button>更多详情</button>
                    <div>
                        <div class="dot dot-active"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>

                </div>
            </article>
        </section>
        
        <section class="colorful">
            <article>
                <div>
                    <p>新时代</p>
                    <p>关于爱生活的我们</p>
                    <hr>
                    <button>查看更多</button>
                </div>

            </article>
            <article>
                <div>
                    <p>新时代</p>
                    <p>关于爱生活的我们</p>
                    <hr>
                    <button>查看更多</button>
                </div>
            </article>
            <article>
                <!-- 放置图片 -->
            </article>
        </section>
        <section class="contact">
            <div class="contact-header">
                <h2>成为我们的志愿者</h2>
                <hr>
                <p>新世界的大家庭需要每一个爱生活的人加入，如果你够年轻，有梦想，有激情那就不要由于，快来加入我们，成为改变所有人生活的人</p>
            </div>
            <div class="contact-main">
                <div class="contact-aside">
                    <article>
                        <h2>新世界志愿者协议</h2>
                        <p>加入新世界制原则的人员必须准守中华人们共和国的相关法律法规，并且绷着平等资源的原则......</p>
                        <a href="#">more</a>
                    </article>
                    <article>
                        <h2>新世界志愿者协议</h2>
                        <p>加入新世界制原则的人员必须准守中华人们共和国的相关法律法规，并且绷着平等资源的原则......</p>
                        <a href="#">more</a>
                    </article>
                    <article>
                        <h2>更多条款</h2>
                        <a href="#">more</a>
                    </article>
                </div>
                <div class="contact-method">
                    <input type="text" id="username" placeholder="姓名：">
                    <input type="text" id="age" placeholder="年龄：">
                    <input type="text" id="telephone" placeholder="联系方式：">
                    <input type="text" id="address" placeholder="联系地址：">
                    <textarea id="short-world" placeholder="请简单描述您梦想的生活" maxlength="500"></textarea>
                    <button>提交申请</button>
                </div>
            </div>
        </section>

        <section class="contact-us">
            <h2>联系我们</h2>
            <p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯　也可以通过以下任务方式关注我们的动态</p>
            <div>
                <input type="text" placeholder="someone@email.com">
                <button>提交</button>
            </div>
            <img src="icons/QQ.svg">
            <img src="icons/新浪微博.svg">
            <img src="icons/twitter.svg">
            <img src="icons/互联网.svg">
        </section>
    </main>
    <footer>
        <p>@2016新世界</p>
        <p>Back to top</p>
    </footer>
</body>

</html>